<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected:type==='all'}" href="javascript:;" @click="changeType('all')">全部</a>
			</li>
			<li>
				<a href="javascript:;" :class="{selected:type==='active'}" @click="changeType('active')">未完成</a>
			</li>
			<li>
				<a href="javascript:;" :class="{selected:type==='complete'}"  @click="changeType('complete')">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="showClear" @click="clearDoneAsync">清除已完成</button>
	</footer>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
	export default {
computed:{
	...mapState("todos",['list','type']),
	...mapGetters("todos",['leftCount','showClear'])
},
methods:{
	...mapActions("todos",['clearDoneAsync']),
	...mapMutations("todos",['changeType'])
}
	}
</script>
